AppDesign

AppDesign is a high-level layout wrapper component that provides a complete application shell with configurable top navigation, side navigation, content area, and footer. It serves as the main layout container for your entire application, ensuring consistent UI structure across all pages.

Features

• Complete Application Layout - Provides header, sidebar, content area, and footer
• Responsive Design - Adapts to different screen sizes
• Collapsible Sidebar - Toggle sidebar visibility with a hamburger menu
• Configurable Components - Customize logo, navigation items, and UI elements
• Profile Management - Optional user profile menu
• Notification System - Optional notification icon
• Search Functionality - Optional search bar in the header
• Smooth Transitions - Animated sidebar toggling

Installation

Ensure you have the required dependencies:

# If using npm
npm install primereact primeicons react

# If using yarn
yarn add primereact primeicons react

This component also depends on internal components: TopNav, SideNav, and Footer.

Component API

Props

Prop	Type	Required	Default	Description
sideNavItems	array	Yes	-	Configuration array for sidebar navigation menu items.
customLogo	string	Yes	-	URL or path to the application logo image.
isNotification	boolean	No	false	Controls whether to show the notification bell icon.
isProfile	boolean	No	false	Controls whether to show the user profile avatar and menu.
isSearchbar	boolean	No	false	Controls whether to show the search input in the header.
children	node	Yes	-	Content to be rendered in the main content area.
userMenuItems	array	No	-	Configuration array for user profile dropdown menu items.

Navigation Item Structure

The sideNavItems prop should be an array of objects following the PrimeReact PanelMenu model structure:

{
  label: string,       // Display text for the menu item
  icon: string,        // PrimeIcon class name (e.g., 'pi pi-file')
  items: [             // Optional submenu items (can be nested)
    {
      label: string,
      icon: string,
      items: [...]     // Further nesting is possible
    }
  ]
}

User Menu Item Structure

The userMenuItems prop should be an array of objects following the PrimeReact Menu model structure:

{
  label: string,      // Category label
  items: [            // Menu items under this category
    {
      label: string,  // Item label
      icon: string,   // PrimeIcon class name
      command: func   // Function to execute when clicked
    }
  ]
}

Basic Usage

import React from 'react';
import AppDesign from './AppDesign';

function App() {
  // Define the sidebar navigation structure
  const sideNavItems = [
    {
      label: 'Dashboard',
      icon: 'pi pi-home',
      command: () => navigate('/dashboard')
    },
    {
      label: 'Users',
      icon: 'pi pi-users',
      items: [
        {
          label: 'List All',
          icon: 'pi pi-list',
          command: () => navigate('/users/list')
        },
        {
          label: 'Add New',
          icon: 'pi pi-plus',
          command: () => navigate('/users/new')
        }
      ]
    },
    {
      label: 'Reports',
      icon: 'pi pi-chart-bar',
      command: () => navigate('/reports')
    }
  ];

  // Define user menu items
  const userMenuItems = [
    {
      label: 'Profile',
      items: [
        {
          label: 'Settings',
          icon: 'pi pi-cog',
          command: () => navigate('/settings')
        },
        {
          label: 'Logout',
          icon: 'pi pi-sign-out',
          command: () => {
            localStorage.clear();
            navigate('/signin');
          }
        }
      ]
    }
  ];

  // Company logo
  const customLogo = "/assets/images/company-logo.png";

  return (
    <AppDesign
      sideNavItems={sideNavItems}
      customLogo={customLogo}
      isNotification={true}
      isProfile={true}
      isSearchbar={true}
      userMenuItems={userMenuItems}
    >
      {/* Your application pages/components go here */}
      <div className="p-4">
        <h1>Welcome to the Dashboard</h1>
        <p>This is the main content area of your application.</p>
      </div>
    </AppDesign>
  );
}

export default App;

Advanced Usage

With React Router Integration

import React from 'react';
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import AppDesign from './AppDesign';
import Dashboard from './pages/Dashboard';
import UserList from './pages/UserList';
import UserForm from './pages/UserForm';
import Reports from './pages/Reports';
import Settings from './pages/Settings';
import Login from './pages/Login';

function App() {
  // Navigation structure and other props defined as in the basic example
  
  return (
    <BrowserRouter>
      <Routes>
        {/* Public routes without AppDesign wrapper */}
        <Route path="/signin" element={<Login />} />
        
        {/* Protected routes with AppDesign wrapper */}
        <Route path="/" element={
          <AppDesign
            sideNavItems={sideNavItems}
            customLogo={customLogo}
            isNotification={true}
            isProfile={true}
            isSearchbar={true}
            userMenuItems={userMenuItems}
          >
            <Routes>
              <Route path="/" element={<Dashboard />} />
              <Route path="/users/list" element={<UserList />} />
              <Route path="/users/new" element={<UserForm />} />
              <Route path="/reports" element={<Reports />} />
              <Route path="/settings" element={<Settings />} />
            </Routes>
          </AppDesign>
        } />
      </Routes>
    </BrowserRouter>
  );
}

With Dynamic Permission-Based Navigation

import React, { useEffect, useState } from 'react';
import AppDesign from './AppDesign';

function App() {
  const [sideNavItems, setSideNavItems] = useState([]);
  const [userRole, setUserRole] = useState('');
  
  useEffect(() => {
    // Get user role from authentication system
    const role = localStorage.getItem('userRole') || 'guest';
    setUserRole(role);
    
    // Generate navigation based on role
    const navItems = generateNavigationForRole(role);
    setSideNavItems(navItems);
  }, []);
  
  const generateNavigationForRole = (role) => {
    const baseNavItems = [
      {
        label: 'Dashboard',
        icon: 'pi pi-home',
        command: () => navigate('/dashboard')
      }
    ];
    
    // Add admin-only items
    if (role === 'admin') {
      baseNavItems.push({
        label: 'Administration',
        icon: 'pi pi-cog',
        items: [
          {
            label: 'User Management',
            icon: 'pi pi-users'
          },
          {
            label: 'System Settings',
            icon: 'pi pi-sliders-h'
          }
        ]
      });
    }
    
    // Add items for all authenticated users
    if (role !== 'guest') {
      baseNavItems.push({
        label: 'My Account',
        icon: 'pi pi-user'
      });
    }
    
    return baseNavItems;
  };
  
  return (
    <AppDesign
      sideNavItems={sideNavItems}
      customLogo="/assets/logo.png"
      isNotification={userRole !== 'guest'}
      isProfile={userRole !== 'guest'}
      isSearchbar={true}
      userMenuItems={userMenuItems}
    >
      {/* Content based on routes */}
    </AppDesign>
  );
}

Component Structure

The AppDesign component orchestrates several sub-components to create a complete application layout:

1. TopNav - The top navigation bar with logo, hamburger menu, search, notifications, and profile
2. SideNav - The collapsible side navigation panel with menu items
3. Main Content Area - The central area where application content is rendered
4. Footer - The application footer with copyright information

The component maintains its own state for sidebar visibility.

Internal Components

TopNav

The top navigation bar with the following features:

• Hamburger menu button for toggling sidebar visibility
• Application logo
• Optional search bar
• Optional notification icon
• Optional user profile avatar with dropdown menu

SideNav

The side navigation panel with the following features:

• Uses PrimeReact's PanelMenu for navigation items
• Collapsible/expandable panel
• Support for nested menu items
• Icons for menu items

Footer

A simple footer component displaying copyright information.

Styling

The component uses a combination of Tailwind CSS utility classes and PrimeReact styling:

Layout Structure

• Uses a full-screen layout approach
• min-h-screen ensures the layout takes at least the full viewport height
• Main content area adjusts width based on sidebar visibility

Transitions

• transition-all duration-300 provides smooth animation when toggling the sidebar
• Content area margin (ml-[200px] or ml-0) changes based on sidebar visibility

Responsiveness

• Adjusts layout for different screen sizes
• Sidebar can be toggled for smaller screens

Customization Options

Layout Adjustments

You can modify the component to include additional layout options:

<AppDesign
  // Standard props
  sideNavTheme="dark"  // Additional prop for sidebar theme
  footerContent={<CustomFooter />}  // Custom footer component
>
  {/* Content */}
</AppDesign>

Class Name Extensions

Modify the component to accept additional class names for styling customization:

// Inside the modified AppDesign component
<div className={`card ${props.topNavClassName || ''}`}>
  <TopNav ... />
</div>

<div className={`min-h-screen ${props.contentContainerClassName || ''}`}>
  {/* Content */}
</div>

State Management

The AppDesign component manages the following state:

• visible - Boolean state for sidebar visibility, toggled by the hamburger menu

Accessibility Considerations

• Ensure proper keyboard navigation in both top and side navigation
• Add ARIA attributes for improved screen reader support
• Consider focus management when toggling the sidebar

Best Practices

1. Consistent Navigation - Keep navigation structure consistent across the application
2. Responsive Design - Test the layout on different device sizes
3. Clear Hierarchy - Organize navigation items in a logical hierarchy
4. Visual Feedback - Provide visual cues for active navigation items
5. Performance - Optimize for performance, especially with complex navigation structures

Troubleshooting

Common Issues

• Navigation items not appearing - Check the format of the sideNavItems array
• Profile menu not working - Verify the userMenuItems structure
• Content overlapping with sidebar - Check the conditional styling based on sidebar visibility
• Transitions not working - Ensure Tailwind CSS is properly configured for transitions

Integration Examples

With Authentication System

import React, { useState, useEffect } from 'react';
import AppDesign from './AppDesign';
import AuthService from './services/AuthService';

function AuthenticatedApp() {
  const [isAuthenticated, setIsAuthenticated] = useState(false);
  const [userData, setUserData] = useState(null);
  
  useEffect(() => {
    const checkAuth = async () => {
      const auth = await AuthService.checkAuthStatus();
      setIsAuthenticated(auth.isAuthenticated);
      setUserData(auth.user);
    };
    
    checkAuth();
  }, []);
  
  const userMenuItems = [
    {
      label: 'Profile',
      items: [
        {
          label: `${userData?.name || 'User'}`,
          icon: 'pi pi-user'
        },
        {
          label: 'Settings',
          icon: 'pi pi-cog'
        },
        {
          label: 'Logout',
          icon: 'pi pi-sign-out',
          command: () => AuthService.logout()
        }
      ]
    }
  ];
  
  if (!isAuthenticated) {
    return <LoginComponent />;
  }
  
  return (
    <AppDesign
      // Props as needed
      userMenuItems={userMenuItems}
    >
      {/* Protected content */}
    </AppDesign>
  );
}

Contributing

Guidelines for contributing to the development of this component.

License

Specify your license information here.